<script setup>
import {PATH} from "../../api/index"
import {ref,reactive,watch,computed} from "vue"
import { useMagicKeys } from '@vueuse/core'

const props = defineProps(['main'])
const {main} = props;
const emits = defineEmits(['send'])
const {control,enter} = useMagicKeys();
const textRef = ref();
const tuijianList = reactive(["11111111","2222"])
const isThink = ref(false)
const isLink = ref(false)
const page = ref('chat')

const loading = computed(() => main.chatData.contentLoading || main.chatData.thinkLoading)

watch(enter,(v) => {
    if(!v) return ;
    if(control.value && page.value == 'chat'){
        // 换行
        textRef.value.value += '\n';
    }
    else{
        handleSend()
    }
})

watch(page,(v) => {
    if(v == 'chat'){
        console.log('..........')
        setTimeout(() => {
            textRef.value.focus();
            textRef.value.setSelectionRange(-1, -1);
        })
    }
})

const handleUpload = () => {}

const handleSend = () => {
    const v = textRef.value.value
    const data = {isLink:isLink.value,isThink:isThink.value,content:v};
    switch(page.value){
        case "chat":break;
        case "tuijian":break;
        case "role":break;
        case "code":break;
    }
    if(data.content == ''){
        return ;
    }
    console.log(page.value,'......',data)
    // emits('send',data);
    textRef.value.value = '';
    main.send(data)
}

const handleTuijian = (d) =>{
    textRef.value.value = d;
    handleSend();
}

const handleStop = (e) => {
    e.preventDefault();
}

const placeholder = '请输入内容'

</script>

<template>
    <div class="w-full h-fit m-x-auto p-10 m-y-10 rd-8 b-1 b-solid b-#ddd bg-#ffffff88 box-border">
        <div v-show="page == 'role'"></div>
        <div v-show="page == 'chat'" class="h-fit w-full">
            <textarea ref="textRef" class="w-full border-none outline-none resize-none bg-transparent text-16" placeholder="请输入内容" rows="3" autofocus @keydown.enter="handleStop"></textarea>
        </div>
        <div v-show="page == 'tuijian'" class="max-h-200 min-h-60 overflow-y-auto overflow-x-hidden scrollbar-thin flex flex-wrap items-baseline gap-10">
            <template v-for="d in main.tuijianList">
                <span class="bg-#dff2fb p-y-6 p-x-16 rd-30 shadow-sm cursor-pointer" @click="handleTuijian(d)">{{ d }}</span>
            </template>
        </div>
        
        <div v-show="page == 'code'"></div>
        <!-- footer -->
        <div class="w-full h-20 flex justify-between text-20 c-#bbb">
            <div class="flex items-center gap-10">
                <div :class="['i-proicons:chat icon-radio cursor-pointer',{'c-#409EFF':page == 'chat'}]" @click="page = 'chat'" title="聊天"></div>
                <div :class="['i-fluent:book-default-28-regular icon-radio cursor-pointer',{'c-#409EFF':page == 'tuijian'}]" @click="page = 'tuijian'" title="推荐" ></div>
                <!-- <div :class="['i-oui:app-users-roles icon-radio cursor-pointer',{'c-#409EFF':page == 'role'}]" @click="page = 'role'" title="角色"></div>
                <div :class="['i-heroicons-outline:code icon-radio cursor-pointer',{'c-#409EFF':page == 'code'}]" @click="page = 'code'" title="代码"></div> -->
                <div :class="['i-ion:logo-electron cursor-pointer',{'c-#409EFF':main.isThink.value}]" title="深度思考" @click="main.isThink.value = !main.isThink.value"></div>
                <div :class="['i-ooui:network cursor-pointer',{'c-#409EFF':main.isLink.value}]" title="联网搜索" @click="main.isLink.value = !main.isLink.value"></div>
            </div>
            <div class="flex items-center gap-10 ">
                <div v-show="main.isNew.value && !loading" class="i-flat-color-icons:plus cursor-pointer op-80 hover-op-100" @click="main.newChat" title="新建会话"></div>
                <div v-show="!loading" class="i-line-md:upload-outline cursor-pointer op-80 hover-op-100" @click="handleUpload" title="上传文件" ></div>
                <div :class="[' cursor-pointer c-#409EFF op-80 hover-op-100',loading ? 'i-line-md:loading-twotone-loop' : 'i-lets-icons:send-duotone',]" @click="handleSend" :title="loading? '。。。' :'发送 按 Enter 键发送'"></div>
                <div v-show="loading" class="i-ph:stop-duotone c-#F56C6C cursor-pointer op-80 hover-op-100" title="停止"></div>
            </div>
        </div>
    </div>
</template>